<template>
	<uv-modal
		ref="modalRef"
		closeOnClickOverlay
		:showConfirmButton="true"
		:showCancelButton="false"
		:custom="true"
		>
		<view class="people-modal">
			<view class="header">
				<text class="title">您好，请选择就餐人数</text>
			</view>
			<view class="grid">
				<view
					class="item"
					:class="{ active: selectNum === num }"
					v-for="(num, index) in peopleList"
					:key="index"
					@tap="selectNum = num">
					{{ num }}
				</view>
			</view>
            <button class="start-btn" :disbled="!selectNum" @tap="handleStart">继续点餐</button>
		</view>
        <template v-slot:confirmButton>
        </template>
	</uv-modal>
</template>

<script setup>
	import { ref, defineExpose } from 'vue'

	const selectNum = ref(null)
	const modalRef = ref(null)

	// 对外暴露 open() 方法，供父组件调用
	function open(num) {
		selectNum.value = num
		modalRef.value.open()
	}

	defineExpose({
		open,
	})

	// 可选：开始点餐时触发事件通知父组件
	const emit = defineEmits(['confirm'])

	const peopleList = [1, 2, 3, 4, 5, 6, 7, 8, 9,]

	function handleStart() {
		if (!selectNum.value) {
			uni.showToast({
				title: '请选择人数',
				icon: 'none',
			})
			return
		}
        modalRef.value.close()
		emit('confirm', selectNum.value) // 通知父组件
	}
</script>

<style scoped lang="scss">
    :deep(.uv-modal__button-group){
        display: none !important;
    }
	.people-modal {
		// padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.table {
		font-size: 26rpx;
		color: #999;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		justify-content: space-between;
	}

	.item {
		width: 120rpx;
		height: 80rpx;
		border-radius: 100rpx;
		background-color: #f5f5f5;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
	}

	.item.active {
		background-color: $qingzhen-btn-primary-color;
		color: #fff;
	}

	.start-btn {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: $qingzhen-btn-primary-color;
		border: none;
		border-radius: 100rpx;
		color: #fff;
		font-size: 30rpx;
	}
</style>
